<script lang="ts" setup>
import { useRoute } from 'vue-router';
import router from '../router/router';
import { getOne } from '../API/context';
import { ref, toRefs } from 'vue';

const route = useRoute();
// console.log(route.query.pid)
let passage = ref()
getOne(route.query.pid).then(res =>{
    // console.log(res)
    passage.value = res.data.data.Passage
})
</script>
<style scoped>
.date{
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    color: rgb(172, 172, 172);
}
.wz{
    margin-left: 20px;
    text-indent: 2em;
    word-wrap: break-word;
    width: 650px;
    max-width: 690px;
    font-size: 18px;
    text-align: left;
    color: rgb(92, 92, 92);
}

.psg{
    position: relative;
    text-align: center;
    overflow-y: scroll;
    /* padding: 5px; */
    float: left;
    margin-top: 25px;
    /* margin-left: 30px; */
    width: 720px;
    height: 663px;
    background-color: rgb(195, 232, 254);
}
@media (prefers-color-scheme: dark) {
    .psg{
        background-color: rgb(65, 98, 104);
        color: rgb(0, 0, 0);
    }
    .wz{
        color: rgb(10, 57, 57);
    }
}

</style>
<template>
    <div class="psg">
        <!-- <br/> -->
        <h2 class="title">{{ passage.title }}</h2>
        <div class="wz">{{ passage.pcontext }}</div>
         <!-- {{ passage.pcontext }} -->
        <span class="date">{{ passage.date }}</span>
    </div>
</template>